<template>
  <FrontSideTable
    dataUrl="/sys/function/getList"
    addUrl="/sys/function/add"
    editUrl="/sys/function/edit"
    deleteUrl="/sys/function/delete"
    tableTitle="功能列表"
    searchHint="根据功能名称或类型查找"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onCreated="onCreated">
    <template slot="form">
      <!--  新增或编辑对话框  -->
      <el-form-item label="功能类型" prop="type">
        <el-input v-model="form.type" placeholder="输入功能类型"></el-input>
      </el-form-item>
      <el-form-item label="功能名称" prop="name">
        <el-input v-model="form.name" placeholder="输入功能名称"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  let oldName = "";

  let oldType = "";

  export default {
    name:"FunctionManagement",
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        }else {
          if(this.dataList.some(item=>item.name === value)) {
            callback(new Error("功能名重复"));
          }else {
            callback();
          }
        }
      };

      //类型校验
      let typeValidator = (rule, value, callback)=>{
        if(oldType === value) {
          callback();
        }else {
          if(this.dataList.some(item=>item.type === value)) {
            callback(new Error("功能类型重复"));
          }else {
            callback();
          }
        }
      };

      return {
        dataList:[],
        searchProps:["name", "type"],
        columns:[
          {prop:"type", label:"功能类型"},
          {prop:"name", label:"功能类型名"},
          {prop:"notes", label:"备注"}
        ],
        form: {
          name:"",
          type:"",
          notes:""
        },
        rules:{
          name:[
            {required: true, message:"请输入功能名称", trigger:"blur"},
            {validator: nameValidator, trigger:"blur"}
          ],
          type:[
            {required: true, message:"请输入功能类型", trigger:"blur"},
            {validator: typeValidator, trigger:"blur"}
          ]
        },
      }
    },
    methods: {
      onCreated(dataList) {
        this.dataList = dataList;
      },
      beforeAdd() {
        oldName = "";
        oldType = "";
        //必须赋予属性，才能触发修改事件
        clearFields(this.form);
      },
      beforeEdit(data) {
        oldName = data.name;
        oldType = data.type;
        this.form = {...data};
      }
    },
    components: {FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// FuntionManagement.vue?77e35364